<template>
  <div>
    <PageList>
      <template #header>实时定位</template>
      <template #filter>
        <ListFilter :form="topFilter" :key-list="keyList" @search="handleSearch" @reset="handleReset"></ListFilter>
      </template>
      <template #table>
        <ListTable ref="RefListTable" :loading="tableLoading" :table-data="tableData" :table-col="tableCol"></ListTable>
      </template>
    </PageList>
  </div>
</template>
<script>
  import { parseTime } from '@/utils'
  import listMixin from '@/mixins/list'
  import ListFilter from '@/components/ListFilter'
  import { mapGetters } from 'vuex'
  import { area, department, work, realtimeLocation } from '@/api/api'
  export default {
    components: {
      ListFilter
    },
    mixins: [listMixin],
    data() {
      return {
        timeId: '',
        // 部门下拉框
        dptList: [],
        // 部门下拉框
        areaList: [],
        // 工种下拉框
        workList: [],
        // 查询部分
        topFilter: {},
        keyList: ['employee.accessCardID', 'employee.department.deptName', 'employee.name', 'employee.rfid', 'employee.job.jobTitle', 'employee.work.workName', 'baseStation.area.name'],
        // 列表数据
        tableData: [],
        // 列表表头
        tableCol: [
          { type: 'index', label: '序号', width: '60px', height: "250" },
          {
            label: '员工名称/车辆类型', formatter(row, col, cell) {
              let deptName = ''
              if (row.carId) {
                deptName = row.car.carType
              } else if (row.employeeId) {
                deptName = row.employee.name
              }
              return deptName || '--'
            }, minWidth: '142px'
          },
          {
            label: 'RFID', formatter(row, col, cell) {
              let rfid = ''
              if (row.carId) {
                rfid = row.car.rfid
              } else if (row.employeeId) {
                rfid = row.employee.rfid
              }
              return rfid || '--'
            }
          },
          {
            label: '门禁ID/车牌', formatter(row, col, cell) {
              let number = ''
              if (row.carId) {
                number = row.car.plateNumber
              } else if (row.employeeId) {
                number = row.employee.accessCardID
              }
              return number || '--'
            }, minWidth: '116px'
          },
          {
            label: '部门',
            formatter(row, col, cell) {
              return row.employee ? row.employee.department.deptName : '--'
            }
          },
          {
            label: '职务',
            formatter(row, col, cell) {
              return row.employee ? row.employee.job.jobTitle : '--'
            }
          },
          {
            label: '工种',
            formatter(row, col, cell) {
              return !row.employee ? '--' : row.employee.work ? row.employee.work.workName : '--'
            }
          },
          {
            label: '所在区域',
            formatter(row, col, cell) {
              return row.baseStation ? row.baseStation.area.name : '--'
            }
          },
          {
            label: '进入隧道时间',
            formatter(row, col, cell) {
              return parseTime(new Date(row.enterTime).getTime())
            }, minWidth: '162px'
          },
          {
            label: '更新时间',
            formatter(row, col, cell) {
              return parseTime(new Date(row.updateTime).getTime())
            }, minWidth: '162px'
          }
        ]
      }
    },
    computed: {
      ...mapGetters([
        'formValue',
        'pageData'
      ])
    },
    mounted() {
      // 查询搜索框
      this.threeList(() => {
        this.topFilter = {
          'baseStation.area.id': { label: '区域', placeholder: '请选择区域', type: 'select', arr: this.areaList },
          'employee.department.id': { label: '部门', placeholder: '请选择部门', type: 'select', arr: this.dptList },
          'employee.work.id': { label: '工种', placeholder: '请选择工种', type: 'select', arr: this.workList },
          keyword: { label: '关键字', placeholder: '请输入员工名称或RFID，门禁ID' }
        }
      })
      // 定时更新列表
      this.timeId = setInterval(() => {
        let flag = false
        // 循环判断查询表单是否有值
        this._.forEach(this.formValue, (item => {
          if (item.value) {
            flag = true
          }
        }))
        if (flag) {
          // 有值调用查询
          this.handleSearch()
        } else {
          // 没有值调用列表
          this.getList(this.pageData)
        }
      }, 1000 * 10)
    },
    beforeDestroy() {
      clearInterval(this.timeId)
    },
    methods: {
      // 查询部门，职位，工种
      async threeList(fn) {
        let obj = { pageIndex: 1, pageSize: 1e8 }
        try {
          let resList = await Promise.all([department('post', obj, false), area('post', obj, false), work('post', obj, false)])
          // 部门
          if (resList[0].code === 200) {
            this.dptList = resList[0].data.items.map(item => {
              if (item.lenght === 0) { return }
              return {
                label: item.deptName,
                value: item.id
              }
            })
          }
          // 区域
          if (resList[1].code === 200) {
            this.areaList = resList[1].data.items.map(item => {
              if (item.lenght === 0) { return }
              return {
                label: item.name,
                value: item.id
              }
            })
          }
          // 工种
          if (resList[2].code === 200) {
            this.workList = resList[2].data.items.map(item => {
              if (item.lenght === 0) { return }
              return {
                label: item.workName,
                value: item.id
              }
            })
          }
        } catch (err) {
          console.log(err)
        }
        fn()
      },
      // 请求列表数据
      async getList(query) {
        this.tableLoading = true
        try {
          let obj = query || { pageIndex: 1, pageSize: 10, orderBy: 'createdTime', orderByAscent: false }
          const { data: { items: resData, count, pageIndex } } = await realtimeLocation('post', obj, false)
          this.tableData = []
          this.tableData = resData.map(item => {
            item.loadingEdit = false
            item.loadingDel = false
            return item
          })
          this.$nextTick(() => {
            this.$refs['RefListTable'].update({ page: pageIndex, count })
            this.tableLoading = false
          })
        } catch (err) {
          this.tableLoading = false
          console.error('getList err: ', err)
        }
      },
      handleRowEdit(row) {
        this.$refs['RefAccountsEdit'].open(row, true)
      }
    }
  }
</script>
